<template>
  <div>
    <div class="home" v-if="isAuth">
      <HomeSearch
        disabled
        @onCLick="onSearchBarClick"
        :hot-search="hotSearch"
      ></HomeSearch>
      <HomeCard
        :data="homeCard"
        @onClick="onBookClick"
      ></HomeCard>
      <HomeBanner
        :img="banner.img || ''"
        :title="banner.title"
        :sub-title="banner.subTitle"
      ></HomeBanner>
      <HomeBook
        title="为你推荐"
        row="1"
        col="3"
        :data="recommend"
        mode="col"
        btn-text="换一批"
        @onMoreClick="recommendChange('recommend')"
        @onBookClick="onHomeBookClick"
      ></HomeBook>
      <HomeBook
        title="免费阅读"
        row="2"
        col="2"
        :data="freeRead"
        mode="row"
        btn-text="换一批"
        @onMoreClick="recommendChange('freeRead')"
        @onBookClick="onHomeBookClick"
      ></HomeBook>
      <HomeBook
        title="当前最热"
        row="1"
        col="4"
        :data="hotBook"
        mode="col"
        btn-text="换一批"
        @onMoreClick="recommendChange('hotBook')"
        @onBookClick="onHomeBookClick"
      ></HomeBook>
      <HomeBook
        title="分类"
        row="2"
        col="3"
        :data="category"
        mode="category"
        btn-text="查看全部"
        @onMoreClick="onMoreClick"
        @onBookClick="onCategoryClick"
      ></HomeBook>
    </div>
    <Auth v-if="!isAuth" @getUserInfo="init">

    </Auth>
  </div>
</template>

<script>
import {getSetting, getUserInfo, setStorageSync, getStorageSync, getUserOpenId, hideLoading} from '@/api/wechat'
import {getHomeData, recommend, freeRead, hotBook, register} from '@/api/index'
import HomeSearch from '../../components/home/HomeSearch'
import HomeCard from '../../components/home/HomeCard'
import HomeBanner from '../../components/home/HomeBanner'
import HomeBook from '../../components/home/HomeBook'
import Auth from '../../components/base/Auth'
import {showLoading} from '../../api/wechat'

export default {
  data () {
    return {
      data: [],
      hotSearch: '',
      homeCard: {},
      banner: {},
      recommend: [],
      freeRead: [],
      hotBook: [],
      category: [],
      isAuth: true
    }
  },
  components: {
    Auth,
    HomeBook,
    HomeSearch,
    HomeCard,
    HomeBanner
  },
  methods: {
    recommendChange (key) {
      switch (key) {
        case 'recommend':
          recommend().then((res) => {
            this.recommend = res.data.data
          })
          break
        case 'freeRead':
          freeRead().then(res => {
            this.freeRead = res.data.data
          })
          break
        case 'hotBook':
          hotBook().then(res => {
            this.hotBook = res.data.data
          })
          break
      }
    },
    getHomeData (openId, userInfo) {
      getHomeData({openId}).then((res) => {
        const {
          hotSearch,
          shelf,
          banner,
          recommend,
          freeRead,
          hotBook,
          category,
          shelfCount
        } = res.data.data
        hideLoading()
        this.hotSearch = hotSearch.keyword
        this.banner = banner
        this.recommend = recommend
        this.freeRead = freeRead
        this.hotBook = hotBook
        this.category = category
        this.homeCard = {
          bookList: shelf,
          num: shelfCount,
          userInfo
        }
      }).catch((err) => {
        console.log('捕获异常', err)
      })
    },
    onSearchBarClick () {
      console.log(1)
      this.$router.push({
        path: '/pages/search/main'
      })
    },
    onMoreClick () {
      this.$router.push('/pages/categoryList/main')
    },
    getUserInfo () {
      const onOpenIdComplete = (openId, userInfo) => {
        this.getHomeData(openId, userInfo)
        register(openId, userInfo)
      }
      getUserInfo((userInfo) => {
        setStorageSync('userInfo', userInfo)
        const openId = getStorageSync('userInfo')
        if (!openId || openId.length === 0) {
          getUserOpenId()
        } else {
          console.log('已经获得openid')
          getUserOpenId(openId => onOpenIdComplete(openId, userInfo))
          onOpenIdComplete(openId)
        }
      })
    },
    getSetting () {
      getSetting('userInfo',
        (res) => {
          console.log('获取用户信息成功', res)
          this.isAuth = true
          showLoading('正在加载')
          this.getUserInfo()
        },
        () => {
          this.isAuth = false
          console.log('失败')
        }
      )
    },
    init () {
      this.getSetting()
    },
    /**
     * 点击首页book所处理的事件
     * @param book
     */
    onBookClick (book) {
      this.$router.push({
        path: '/pages/detail/main',
        query: {
          fileName: book.fileName
        }
      })
    },
    onHomeBookClick (book) {
      console.log(book)
      this.$router.push({
        path: '/pages/detail/main',
        query: {
          fileName: book.fileName
        }
      })
    },
    onCategoryClick (category) {
      this.$router.push({
        path: '/pages/list/main',
        query: {
          key: 'categoryId',
          text: category.category,
          title: category.categoryText
        }
      })
    }
  },
  mounted () {
    // this.getHomeData()
    this.init()
  }
}
</script>

<style lang="stylus" scoped>
.book-home
  margin-top 23px;
</style>
